<!-- 帖子页面 -->
<template>
  <div class="one-talk">
       <el-card shadow="always" :body-style="	{ padding: '20px' }" class="header" >
           <div class="face"><img src="@/images/3.png" alt="" width="70px" height="70px">
           <span>来自自由群</span></div>
           <router-link to="/home/onetalk">进入讨论</router-link>
           
           
       </el-card>
       <el-card shadow="always" :body-style="	{ padding: '50px' }" class="main" >
           <div class="title">
               <span id="title">
                   做一个好摄影师
               </span><br>
               <span id="time">1月20日发布</span>

           </div>
           <div class="author">
              
                <el-popover placement="left" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
                <img src="@/images/3.png" alt="" width="70px" height="70px">
              </a>
            </el-popover>
               <span id="name">ice</span>
               <el-button type="warning">关注</el-button>
           </div>
           <div class="tmain">
               <span>想当一个好的摄影师</span>
           </div>
           <div class="caozuo">
               <div class="shoucan">
              <img src="@/assets/icon1/dianzan.svg" alt="" width="20px" v-if="dianzan" @click.prevent="dianzan=false">
              <img src="@/assets/icon1/dianzansucc.svg" alt="取消点赞" title="取消点赞" style="width:20px;" 
              v-else @click.prevent="dianzan=true">
                <span>点赞</span>
         </div>
         <span>|</span>
         <div class="like">
              <img src="@/assets/icon1/shoucan.svg" alt="" width="20px" v-if="shoucan" @click.prevent="shoucan=false">
              <img src="@/assets/icon1/shoucansucc.svg" alt="取消收藏" title="取消收藏" style="width:20px;" 
              v-else @click.prevent="shoucan=true">
              <span>收藏</span>
         </div>
           </div>
       </el-card>
       <div class="argue">
           <argue></argue>
       </div>
  </div>
</template>

<script>
import Argue from '@/subcomponents/argue.vue'
import AuthorCard from '@/components/photoInfo/authorCard.vue'
export default {
  data () {
    return {
         dianzan: true,
        shoucan: true,
    };
  },
    components:{
        Argue,
    AuthorCard

    },
  methods: {}
}

</script>
<style lang='scss' scoped>
.one-talk{
    margin:20px 300px;
    width:60%;
    .header{
        width: 100%;
        height: 110px;

      .face{
            display: flex;
        align-items: center;
        span{
            margin-left:20px;
            font-size:16px;
            letter-spacing: 2px;
            color:#909399
        }
      }
        a{
            position: absolute;
          right: 400px;
    top: 70px;
        }
       
    }
    .main{
        height: auto;
        margin-top:20px;
   
        .title{
            #title{
                    font-size: 40px;
    letter-spacing: 1.5px;
    font-weight: bold;
    line-height: 70px;
            }
            #time{
                line-height: 50px;
    font-size: 16px;
    letter-spacing: 2px;
    color: #909399;
            }
        }
        .author{
            margin: 20px 20px;
    display: flex;
    align-items: center;
    img{
        box-shadow: 1px 0px 0px 0px #909399;
    }
    #name{
        margin: 0px 40px 0 20px;
    font-size: 20px;
    letter-spacing: 2px;
    }
        }
        .tmain{
            margin: 80px 20px;
    font-size: 16px;
    letter-spacing: 1.5px;
        }
        .caozuo{
            display: flex;
            justify-content: space-around;
            img {
        cursor: pointer;
        transition: all 0.6s;
      }
      img:hover {
        transform: scale(1.4);
      }
        }
    }
    .argue{
        margin: 20px 0;
    }
}
</style>